<template>
  <el-collapse-item :title="department.deptName" :name="department.deptId">
    <div class="tree-node-actions">
      <el-button
          type="primary"
          size="small"
          @click="addSubDepartment"
      >
        新增子部门
      </el-button>
      <el-button
          type="danger"
          size="small"
          @click="deleteDept"
      >
        删除
      </el-button>
    </div>
    <el-collapse v-if="department.children && department.children.length" :value="activeChildren">
      <DepartmentItem
          v-for="child in department.children"
          :key="child.deptId"
          :department="child"
          @add="$emit('add', child.deptId)"
          @delete="$emit('delete', child.deptId)"
      />
    </el-collapse>
  </el-collapse-item>
</template>

<script setup>
import { ref } from 'vue';
import DepartmentItem from "./DepartmentItem.vue"; // 确保路径正确

const props = defineProps({
  department: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(['add', 'delete']);

// 控制子 Collapse 的展开状态
const activeChildren = ref([]);

// 触发添加子部门
const addSubDepartment = () => {
  emit('add', props.department.deptId);
};

// 触发删除部门
const deleteDept = () => {
  emit('delete', props.department.deptId);
};
</script>

<style scoped>
.tree-node-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end; /* 右对齐按钮 */
  gap: 10px;
}

.tree-node-actions .el-button {
  font-family: 'Orbitron', sans-serif;
}

.tree-node-actions .el-button--success {
   border-color: #00d2ff;
  color: #0f2027;
 }

.tree-node-actions .el-button--success:hover {
  background-color: #00aaff; /* 悬停变暗 */
  border-color: #00aaff;
}

.tree-node-actions .el-button--danger {

}

.tree-node-actions .el-button--danger:hover {
  background-color: #e04354; /* 悬停变暗 */
  border-color: #e04354;
}

/* 递进效果 */
.el-collapse-item {
  padding-left: 20px; /* 根据需要调整缩进 */
  border: none;
}

.el-collapse-item > .el-collapse-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #0f2027; /* 深色文本 */
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
}

.el-collapse-item > .el-collapse-item__content {
  background-color: #1f2833; /* 子部门 Collapse 内容背景色 */
  color: #c5c6c7; /* 子部门 Collapse 内容文本颜色 */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
